<template>
  <div
    style="background-color: rgb(215, 215, 215); width: 100vw; height: 200vh"
  >
    <div class="calendar">
      <van-calendar
        class="calendar-main"
        :min-date="minDate"
        :max-date="maxDate"
        :poppable="false"
        :show-confirm="false"
        :show-mark="false"
        :default-date="defaultDate"
        first-day-of-week="7"
        row-height="35px"
        :formatter="formatter"
        @select="daytext"
        ref="calendar"
      >
        <template #title>
          <div class="calendar-top">
            <div class="calendar-top-time">{{ year }}年{{ month + 1 }}月</div>
            <div class="calendar-top-button">
              <!-- <van-icon name="arrow-left" class="button-icon" @click="arrowLeft()" /> -->
              <div class="lastyear" @click="arrowLeft()">上一年</div>
              <div
                class="lastmonth"
                :style="{ color: isClickLastMonth ? '' : 'grey' }"
                @click="lastYear"
              >
                上个月
              </div>
              <div
                :class="['thismonth', { green: isthisMonth == true }]"
                @click="currentYear"
              >
                本月
              </div>
              <div
                class="nextmonth"
                :style="{ color: isClickNextMonth ? '' : 'grey' }"
                @click="nextYear"
              >
                下个月
              </div>
              <div class="nextyear" @click="arrowRight()">下一年</div>
              <!-- <van-icon name="arrow" class="button-icon" @click="arrowRight()" /> -->
            </div>
          </div>
        </template>
      </van-calendar>

      <div v-if="selectedDayInfo.length>0" class="day-container">
        <div class="day1" v-for="item in selectedDayInfo">
          <div class="market-name">{{ item.villageName }}</div>
          <div class="market-address">{{ item.location }}</div>
          <div class="ji-type">{{ item.scale }}</div>
          <div class="ji-time">{{ item.startTime.substr(0,5) }}-{{ item.endTime.substr(0,5) }}</div>
        </div>
      </div>
      <div v-else class="day-container">
        <div class="day1">
          <div class="market-name">该日暂无集市信息</div>
         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from "vue";
import ji from "@/components/ji.vue";
import { getCalendarList } from "@/api/api";
// function getNameById(id, data, idKey = "date", nameKey = "message") {
//   var res = data.filter((item) => item[idKey] === id);
//   if (res && res.length) {
//     document.getElementById("day1").innerHTML = res[0][nameKey];
//   }
// }
export default {
  name: "CalendarView",
  data() {
    return {
      calendar: null,
      defaultDate: new Date(),
      today: new Date(),
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      selectedDay: null, // 选中的日期
      selectedDayInfo: [], // 选中日期对应的信息
      minDate: null,
      maxDate: null,
      isClickLastYear: true,
      isClickLastMonth: true,
      isClickNextMonth: true,
      isClickNextYear: true,
      isthisMonth: true,
      testDatas: [],
      dayDatas: [],
      calendarDatas: [],
    };
  },
  components: {
    ji,
  },
  created() {
    this.year = this.today.getFullYear();
    this.month = this.today.getMonth();
    this.getCalendarList();
    this.setDate();
  },
  watch: {
    calendarDatas() {
      if (this.calendar) {
        this.$refs.calendar.reload();
      }
    }
  },
  methods: {
    formatter(day) {
      //给有数据的日期加点
      if (this.calendarDatas && this.calendarDatas.length > 0) {
        this.calendarDatas.forEach((item) => {
          const formattedDate = this.formatDate(new Date(item.detail));
          if (formattedDate === this.formatDate(day.date)) {
            day.className = "addDot";
            if (day.type === "selected") {
              day.className = "addDot1";
            }
          }
        });
      }
      //当天日期加样式
      return day;
    },

    //设置当前显示日历
    setDate() {
      const daycount = new Date(this.year, this.month + 1, 0).getDate();
      let monthMin = new Date(this.year, this.month, 1);
      let monthMax = new Date(this.year, this.month, daycount);
      this.minDate = monthMin;
      this.maxDate = monthMax;
    },
    //切换上年
    arrowLeft() {
      this.year--;
      this.setDate();
      if (this.year == this.today.getFullYear()) {
        if (this.month == this.today.getMonth()) {
          this.isthisMonth = true;
        } else {
          this.isthisMonth = false;
        }
      } else {
        this.isthisMonth = false;
      }
      // if (!this.isthisMonth) {
      //   this.isthisMonth = true;
      // }
    },
    //切换上月
    lastYear() {
      if (this.month > 0) {
        this.month--;
        this.setDate();
        if (this.month > 0) {
          this.isClickLastMonth = true;
        } else {
          this.isClickLastMonth = false;
        }
        if (!this.isClickNextMonth) {
          this.isClickNextMonth = true;
        }
        if (this.year == this.today.getFullYear()) {
          if (this.month == this.today.getMonth()) {
            this.isthisMonth = true;
          } else {
            this.isthisMonth = false;
          }
        } else {
          this.isthisMonth = false;
        }
      } else {
        this.month = this.month + 11;
        this.year--;
        this.setDate();
        this.isthisMonth = false;
      }
    },
    //切换下年
    arrowRight() {
      this.year++;
      this.setDate();
      if (this.year == this.today.getFullYear()) {
        if (this.month == this.today.getMonth()) {
          this.isthisMonth = true;
        } else {
          this.isthisMonth = false;
        }
      } else {
        this.isthisMonth = false;
      }
    },
    //切换下月
    nextYear() {
      if (this.month < 11) {
        this.month++;
        this.setDate();
        if (this.month < 11) {
          this.isClickNextMonth = true;
        } else {
          this.isClickNextMonth = false;
        }
        if (!this.isClickLastMonth) {
          this.isClickLastMonth = true;
        }
        if (this.year == this.today.getFullYear()) {
          if (this.month == this.today.getMonth()) {
            this.isthisMonth = true;
          } else {
            this.isthisMonth = false;
          }
        } else {
          this.isthisMonth = false;
        }
      } else {
        this.month = this.month - 11;
        this.year++;
        this.setDate();
        this.isthisMonth = false;
      }
    },
    currentYear() {
      this.month = this.today.getMonth();
      this.year = this.today.getFullYear();
      this.setDate();
      if (this.year == this.today.getFullYear()) {
        if (this.month == this.today.getMonth()) {
          this.isthisMonth = true;
        } else {
          this.isthisMonth = false;
        }
        if (!this.isthisMonth) {
          this.isthisMonth = true;
        }
      } else {
        this.isthisMonth = false;
      }
    },
    isthismonth() {
      if (this.year == this.today.getYear()) {
        if (this.month == this.today.getMonth()) {
          this.isthisMonth = true;
        } else {
          this.isthisMonth = false;
        }
        if (!this.isthisMonth) {
          this.isthisMonth = true;
        }
      } else {
        this.isthisMonth = false;
      }
    },

    async getCalendarList() {
      let params = {
        month: this.month + 1,
        year: this.year,
      };
      let { data } = await getCalendarList(params);
      if (data.code == 200) {
        this.dayDatas = data.rows;
        this.dayDatas.forEach((element) => {
          if (element.scale == "small" ) {
            element.scale = "小集";
          } else if(element.scale == "middle" ) {
            element.scale = "中集";
          } else{
            element.scale = "大集";
          }
          if (element.frequency == "day" || element.frequency == "month") {
            this.calendarDatas.push(element);
          } else if (element.frequency == "week") {
            var calendarItem = element;
            var details = element.detail.split(",");
            details.forEach((detailItem) => {
              var calendarItem = {
                  detail: detailItem,
                  endTime: element.endTime,
                  frequency: element.frequency,
                  location: element.location,
                  scale: element.scale,
                  startTime: element.startTime,
                  villageName: element.villageName
                };
              this.calendarDatas.push(calendarItem);
            });
          }
        });
        
      this.daytext(new Date())
      }
    },
    daytext(Date) {
      this.selectedDay = this.formatDate(Date); // 格式化选中的日期
      this.selectedDayInfo=[];
      this.getDayInfoByDate(this.selectedDay); // 获取选中日期的信息
    },
    getDayInfoByDate(date) {
      console.log(this.calendarDatas)
      this.calendarDatas.forEach((item) => {
        if(item.detail === date){
          this.selectedDayInfo.push(item);
        }
      })
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style lang="less" scoped>
.calendar {
  // position: relative;
  // border: 1px solid red;
  margin-bottom: 46px !important;

  .day1 {
    background-color: rgb(255, 255, 255);
    border-radius: 15px 15px 15px 15px;
    width: 91%;
    height: 150px;
    font-size: 25px;
    text-align: left;
    line-height: 60px;
    padding: 15px;
    margin-top: 25px;
    margin-left: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 4px 2px 2px rgb(166, 166, 166),
      -4px -4px 2px 2px rgb(166, 166, 166);
    .market-name {
      position: relative;
      top: -20px;
      left: 55px;
    }
    .market-address {
      position: relative;
      top: -20px;
      left: 55px;
    }
    .market-name::before {
      position: relative;
      top: 45px;
      left: -45px;
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background: url("@/assets/images/蒙版组 17.svg");
      background-size: cover;
    }
    .market-address::before {
      position: relative;
      top: 45px;
      left: -45px;
      content: "";
      display: block;
      width: 30px;
      height: 30px;
      background: url("@/assets/images/蒙版组 18.svg");
      background-size: cover;
    }
    .ji-type {
      width: 200px;
      height: 70px;
      left: 465px;
      top: -175px;
      border-radius: 15px 15px 0px 0px;
      background-color: #e1fce8;
      position: relative;
      text-align: center;
      line-height: 70px;
      color: #45b771;
      font-family: "Microsoft YaHei-Bold";
      font-size: 30px;
    }
    .ji-time {
      width: 200px;
      height: 70px;
      left: 465px;
      top: -175px;
      border-radius: 0px 0px 15px 15px;
      background-color: #f5fff9;
      position: relative;
      text-align: center;
      line-height: 70px;
      font-size: 30px;
    }
  }
  .day2 {
    position: absolute;
    left: 20px;
    top: 760px;
    width: 95%;
    height: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 15px 15px 15px 15px;
    margin-bottom: 16px;
    display: flex;
  }
  .day3 {
    position: absolute;
    left: 20px;
    top: 970px;
    width: 95%;
    height: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 15px 15px 15px 15px;
    margin-bottom: 16px;
    display: flex;
  }
  .day4 {
    position: absolute;
    left: 20px;
    top: 1180px;
    width: 95%;
    height: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 15px 15px 15px 15px;
    margin-bottom: 16px;
    display: flex;
  }

  .calendar-top {
    background-color: #f5fff8;
    border-radius: 15px 15px 0px 0px;
    margin-bottom: 35px;
    display: flex;
    width: 100%;
    height: 220px;
    box-shadow: -4px -4px 4px 4px rgb(166, 166, 166),
      4px -4px 4px 4px rgb(166, 166, 166);
    justify-content: center;

    .calendar-top-time {
      margin-right: 20px;
      color: #45b46d;
      font-family: "Microsoft YaHei-Bold";
      font-weight: bolder;
      font-size: 28px;
      margin-top: 30px;
    }

    .calendar-top-button {
      background-color: #f5fff8;
      display: flex;
      font-size: 23px;
      margin-top: 35px;
      align-items: top;
      gap: 12px;
      color: #46be78;

      .lastyear,
      .lastmonth,
      .thismonth,
      .nextmonth,
      .nextyear,
      .green {
        width: 100px;
        height: 45px;
        line-height: 41px;
      }

      .button-icon {
        width: 16px;
        height: 16px;
        line-height: 16px;
        background: #3b3b3b;
        border-radius: 50%;
      }
      .lastyear {
        width: 90px;
        height: 37px;
        background-color: #ffffff;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #46be78;
        text-align: center;
        transition-property: background-color, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
      .lastyear:hover {
        background-color: #46be78;
        color: #ffffff;
      }
      .lastyear:hover:active {
        background-color: #ffffff;
        color: #46be78;
      }

      .current-month {
        background-color: #4caf50; /* 绿色 */
        color: white; /* 文本颜色 */
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
      }

      .thismonth {
        width: 90px;
        height: 37px;
        background-color: #fff;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #46be78;
        text-align: center;
        color: #46be78;
        transition-property: background-color, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }

      .thismonth:hover {
        background-color: #46be78;
        color: #ffffff;
      }
      .thismonth:hover:active {
        background-color: #ffffff;
        color: #46be78;
      }
      .green {
        width: 90px;
        height: 37px;
        background-color: #46be78;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #46be78;
        text-align: center;
        color: #ffffff;
      }

      .nextyear {
        width: 90px;
        height: 37px;
        background-color: #ffffff;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #46be78;
        text-align: center;
        transition-property: background-color, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
      .nextyear:hover {
        background-color: #46be78;
        color: #ffffff;
      }
      .nextyear:hover:active {
        background-color: #ffffff;
        color: #46be78;
      }
      .lastmonth {
        width: 90px;
        height: 37px;
        background-color: #ffffff;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #46be78;
        text-align: center;
        transition-property: background-color, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
      .lastmonth:hover {
        background-color: #46be78;
        color: #ffffff;
      }
      .lastmonth:hover:active {
        background-color: #ffffff;
        color: #46be78;
      }
      .nextmonth {
        width: 90px;
        height: 37px;
        background-color: #ffffff;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #46be78;
        text-align: center;
        transition-property: background-color, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
      .nextmonth:hover {
        background-color: #46be78;
        color: #ffffff;
        transition-property: background-color, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
      }
      .nextmonth:hover:active {
        background-color: #ffffff;
        color: #46be78;
      }
    }
  }

  .calendar-weekdays {
    display: flex;
    height: 150%;
    justify-content: space-between;
    align-items: center;
    background-color: #f5fff8;
    box-shadow: -4px -4px 4px 4px rgb(166, 166, 166),
      4px -4px 4px 4px rgb(166, 166, 166);
    color: #0a6236;
    border-radius: 25px 25px 15px 15px;

    // border: 1px solid red;
    .calendar-weekdays-item {
      width: 50px;
      font-size: 20px;
      color: rgba(0, 0, 0 0.5);
      // border: 1px solid red
      background-color: #f5fff8;

      border-radius: 25px 25px 15px 15px;
    }
  }

  .calendar-days {
    box-shadow: -4px 0px 4px 4px rgb(166, 166, 166),
      0px -4px 4px 4px rgb(166, 166, 166);
    display: grid;
    grid-template-columns: repeat(7, 8%);
    grid-row-gap: 14px;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    background-color: #f5fff8;
    border-radius: 25px 25px 15px 15px;

    .calendar-days-item {
      flex-shrink: 0;
      width: 50px;
      font-size: 28px;
      color: #000000;
      // border: 1px solid red;
    }
  }
}

/deep/.van-calendar {
  width: 100%;
  margin-left: -3%;
  background: none;
}

/deep/.van-calendar__body {
  overflow: hidden;
  margin-top: 35px;
  margin-left: 40px;
  background-color: #f5fff8;
  border-radius: 0px 0px 15px 15px;
  box-shadow: -4px 4px 2px 2px rgb(166, 166, 166),
    4px 0px 2px 2px rgb(166, 166, 166);
  width: 95%;
  padding-bottom: 20px;
  padding-top: 20px;
}

/deep/ .van-calendar__day {
  margin-bottom: 15px !important;
  height: 60px !important;
  line-height: 60px !important;
}

/deep/.van-calendar__selected-day {
  border-radius: 15%;
  background-color: #6fe385;
  height: 60px !important;
  line-height: 60px !important;
  z-index: 0;
}

/deep/.van-calendar__day-text {
  font-size: 28px;
}

/deep/.van-calendar__header {
  margin-top: 20px;
  background-color: #f5fff8;
  border-radius: 25px 25px 0px 0px;

  margin-left: 40px;
  // top: 45px;
  // position: absolute;
  // left: 17px;
  width: 95%;
}

/deep/(.van-calendar__day) {
  margin-bottom: 6px !important;
}
/deep/.van-calendar__selected-day {
  border-radius: 15%;
  background-color: #6fe385;
  // background-color: #ffae34;
  z-index: 0;
}

// /deep/.van-calendar__selected-day::after {
//   background-color: #fff !important;
// }

/deep/.van-calendar__header-subtitle {
  display: none !important;
}

/deep/.van-calendar__weekday {
  color: #0a6236;
  margin-top: 60px;
}

/deep/.van-calendar__weekday::before {
  content: "";
  color: #0a6236;
}

//有数据日期加点
/deep/.addDot {
  position: relative;
}

/deep/.addDot::after {
  position: absolute;
  content: "集";
  color: #6fe385;
  font-size: 20px;
  width: 0px;
  height: 0px;
  top: 2.5%;
  left: 76px;
  border-radius: 50%;
  background-color: #ffffff;
}

/deep/.addDot1 {
  position: relative;
}

/deep/.addDot1::after {
  position: absolute;
  content: "集";
  color: #ffffff;
  font-size: 17px;
  width: 0px;
  height: 0px;
  top: -14px;
  left: 65px;
  border-radius: 50%;
  background-color: #6fe385;
}

// 当天日期
// /deep/.calendarToday {
//   position: relative;
//   color: #fff;
//   // font-size: 0;
//   // z-index: 1;
// }

// /deep/.calendarToday::before {
//   width: 35px;
//   height: 35px;
//   line-height: 35px;
//   position: absolute;
//   top: 0;
//   content: "";
//   text-align: center;
//   font-size: 15px;
//   border-radius: 50%;
//   background-color: #ffae34;
//   // z-index: -1;
// }

//当天日期并且有数据
// /deep/.addDot_calendarToday::after {
//   position: absolute;
//   content: "";
//   width: 12px;
//   height: 12px;
//   top: 26px;
//   left: 45px;
//   border-radius: 50%;
//   background-color: #fff;
//   z-index: 4;
// }

// /deep/.addDot_calendarToday::before {
//   width: 35px;
//   height: 35px;
//   line-height: 35px;
//   position: absolute;
//   top: 0;
//   content: "";
//   text-align: center;
//   font-size: 15px;
//   border-radius: 50%;
//   color: #fff;
//   background-color: #ffae34;
// }

//有数据并且被选中
/deep/.addDot_Select::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  top: 26px;
  left: 45px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 3;
}

// //被选中显示的今字
// /deep/.calendarToday .van-calendar__selected-day {
//   font-size: 0;
// }

// /deep/.calendarToday .van-calendar__selected-day::before {
//   content: "";
//   z-index: 9;
//   font-size: 15px;
//   height: 35px;
//   line-height: 35px;
// }

/deep/.addDot_calendarToday .van-calendar__selected-day {
  font-size: 0;
}

/deep/.addDot_calendarToday .van-calendar__selected-day::before {
  content: "";
  z-index: 9;
  font-size: 15px;
  height: 35px;
  line-height: 35px;
}
</style>
